<template>
  <div class="home-container">
        <van-nav-bar class="app-nav-bar">
          <van-button
          slot="title"
          class="search-btn"
          icon="search"
          type="info"
          round
          size="small"
          to="/search"
          >搜索</van-button>
        </van-nav-bar>
        <!-- 导航栏 -->
        <van-tabs class="channel-tabs" v-model="active">
        <van-tab
        :title="channel.name"
        v-for="channel in channels"
        :key="channel.id"
        >
        <article-list :channel="channel" />
        <!-- 文章列表 -->
        <!-- 标签页组件有一个功能，只有你第一次查看标签页的时候，才会渲染里面的内容 -->
       </van-tab>
       <!-- 汉堡按钮定位会遮挡底下的文字，我们使用一种比较巧妙的方法来解决他，在列表中添加一个空列表来占位就可以完美解决 -->
       <div slot="nav-right" class="clear">
       </div>
       <div slot="nav-right"
        class="wap-nav-wrap"
        @click="ischannelEditShow = true">
         <van-icon name="wap-nav" />
       </div>
      </van-tabs>
      <!-- 文章频道列表标签 -->
      <van-popup
      v-model="ischannelEditShow"
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
      closeable
      get-container="body"
      >
      <!-- 模板中的 $event代表的就是传来的参数 -->
      <ChannelEdit
      :channels="channels"
      :active="active"
      @close="ischannelEditShow = false"
      @update-active="onUpdateActive"
      />
      </van-popup>
  </div>
</template>
<script>
import axios from 'axios'
import ArticleList from './components/article.list.vue'
import ChannelEdit from './components/channel-edit'
export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 控制被激活的标签
      channels: [],
      ischannelEditShow: false // 控制编辑频道的显示状态
    }
  },
  created () {
    axios({
      url: '../..//msg.json',
      method: 'get'
    }).then(res => {
      // console.log(res)
      this.channels = res.data.data
    })
  },
  methods: {
    onUpdateActive (index) {
      this.active = index
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar__title {
    max-width: none;
  }
  .search-btn {
    width: 277px;
    height: 32px;
    background-color: #5babfb;
    border: none;
  }
  .van-button__text {
    font-size:14px;
    color:white;
  }
  .van-icon {
    font-size: 19px;
  }
  .channel-tabs {
    /deep/ .van-tab {
      border-right: 1px solid #edeff3;
      border-bottom: 1px solid #edeff3;
      // height: 1.4rem;
    }
    .van-tabs__line {
      width: 0.5rem;
      height: 0.1rem;
      background-color: #3296fa;
      border-radius: 0.3rem;
      // bottom: 0.3rem;
    }
  }
  .wap-nav-wrap {
    position: fixed;
    right: 0;
    width: 0.8rem;
    height: 1.26666rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    opacity: 0.9;
    .van-icon {
      font-size: 1.2em;
    }
  }
  .clear {
    width: 33px;
    flex-shrink: 0;
  }
}
</style>
